<template>
  <div id="app">
    <div class="header">
      <div class="router-container">
        <router-link to="index" class="logo">
        </router-link>
        <router-link to="test" class="nav-router">测试页一</router-link>
        <router-link to="test2" class="nav-router">测试页二</router-link>
      </div>
      <loadingBar ref="loadingBar"></loadingBar>
    </div>
    <div class="content">
        <router-view/>
    </div>
  </div>
</template>

<script>
import loadingBar from '@/components/loadingBar/loadingBar'
export default {
  name: 'App',
  components:{
    loadingBar,
  },
  methods:{

  }

}
</script>

<style lang="stylus">
#app
  position absolute
  height 100%
  width 100%
  .header
    height 66px
    .logo-wrapper
      height 66px
      width 350px
    .router-container
      height 100%
      min-width 880px
      max-width 1280px
      margin 0 auto
      padding 0 30px
      line-height 66px
      .logo
        display inline-block
        height 66px
        width 160px
        background url("../static/logo.png")no-repeat center center/auto 100%
      .nav-router
        display inline-block
        width 96px
        text-align left
        color: #696969
        font-size 14px
        height 66px
        line-height 66px
        transition color linear 0.3s
        vertical-align top
        &:hover
          color #f86b19
          transition color linear 0.3s
  .content
    height calc(100% - 66px)
    /*background #F7C20F*/
    overflow auto
</style>
